import { Canvas } from "@react-three/fiber";
import { useEffect, useRef, useState } from "react";
import * as THREE from "three";

function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [renderer, setRenderer] = useState<THREE.WebGLRenderer | null>(null);

  useEffect(() => {
    if (canvasRef.current) {
      const render = new THREE.WebGLRenderer({
        antialias: true,
        canvas: canvasRef.current,
      });
      setRenderer(render);
      renderer.shadowMap.enabled = true;

      const scene = new THREE.Scene();
    }
  }, [canvasRef]);

  return (
    <>
      <div className="w-full h-full overflow-hidden">
        <canvas
          ref={canvasRef}
          className="w-full h-full overflow-hidden"
          width={window.innerWidth}
          height={window.innerHeight}
        ></canvas>
      </div>
    </>
  );
}

export default App;
